<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.st0{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
			.st1{fill:none;stroke:#000000;stroke-width:4;stroke-miterlimit:10;}
			.st2{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
			.panda{
				height: 150px; width: 100%;
				border: 3px solid black;
				text-align: center;
			}
			.loading{
				height: 150px; width: 100%;
				border: 3px solid black;
				margin-top: 100px;
				background-color: orangered;
				text-align: center;
			}
			.loader{
				margin-top: 25px;
				height: 100px;width: 100%;
				}
			.practise{
				margin-top: 25px;
			}
			.practise_3{
				margin-top: -5px;
			}
			.clock{
				margin-top: 25px;
				height: 100px;width: 100%;
			}
			.icon{
				height: 150px; width: 100%;
				border: 3px solid black;
				margin-top: 100px;
				background-color: ;
				text-align: center;
			}
			.cat{
				margin-top: 10px;
				height: 150px;width: 100%;
			}
		</style>
	</head>
	<body>	
		<div class="panda">
			<svg version="1.1" id="panda" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
				 height="150" viewBox="0 0 150 150">
				<ellipse class="st0" cx="75" cy="83" rx="54" ry="45"/>
				<path class="st0" d="M30,58c-0.39-0.31-7.06-5.76-6-14c0.11-0.83,0.93-6.51,6-10c4.64-3.2,9.68-2.38,12-2c8.08,1.32,12.77,7.31,14,9
					"/>
				<path class="st0" d="M117.89,57c0.39-0.31,7.06-5.76,6-14c-0.11-0.83-0.93-6.51-6-10c-4.64-3.2-9.68-2.38-12-2
					c-8.08,1.32-12.77,7.31-14,9"/>
				<path class="st1" d="M111.5,87.5c-0.97,4.88-6.07,8.54-11,9c-7.56,0.71-13.59-6.21-15-12.5c-0.99-4.39-0.35-11.24,4-13.5
					c3.73-1.94,8.26,0.52,11,2C102.06,73.34,113.13,79.34,111.5,87.5z"/>
				<path class="st1" d="M38.26,87.5c0.97,4.88,6.07,8.54,11,9c7.56,0.71,13.59-6.21,15-12.5c0.99-4.39,0.35-11.24-4-13.5
					c-3.73-1.94-8.26,0.52-11,2C47.7,73.34,36.63,79.34,38.26,87.5z"/>
				<circle cx="76" cy="99" r="4"/>
				<ellipse class="st2" cx="54" cy="81.5" rx="4" ry="3.5"/>
				<ellipse class="st2" cx="95.5" cy="81" rx="4" ry="3.5"/>
			</svg>
			<div class="practise">课后练习1</div>
		</div>	
		
		<div class="loading">
			<svg version="1.1" class="loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
				height="100" viewbox="0 0 100 100">
			<circle fill="none" stroke="#fff" stroke-width="4" cx="50" cy="50" r="44" style="opacity:0.5;"/>
			  <circle fill="#fff" stroke="#e74c3c" stroke-width="3" cx="8" cy="54" r="6" >
				<animateTransform
				  attributeName="transform"
				  dur="2s"
				  type="rotate"
				  from="0 50 48"
				  to="360 50 52"
				  repeatCount="indefinite" />	    
			  </circle>
			</svg>
			<div class="practise">
				课后练习2—原图
			</div>
		</div>
		
		<div class="loading">
			<svg version="1.1" class="loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
				height="100" viewbox="0 0 100 100">
				<circle fill="none" stroke="#fff" stroke-width="4" stroke-dasharray="12" cx="50" cy="50" r="44" style="opacity:0.5;"/>
					<circle fill="#fff" stroke="#e74c3c" stroke-width="3" cx="8" cy="54" r="6" >
						<animateTransform
						  attributeName="transform"
						  dur="15s"
						  type="rotate"
						  from="0 50 50"
						  to="360 50 50"
						  repeatCount="indefinite" />
					</circle>
				</circle>
				<line fill="none" stroke-linecap="round" stroke="black" stroke-width="4" stroke-miterlimit="10" x1="50" y1="50" x2="85" y2="50.5">
					  <animateTransform 
						   attributeName="transform" 
						   dur="2s"
						   type="rotate"
						   from="0 50 50"
						   to="360 50 50"
						   repeatCount="indefinite" />
				</line>
				<line fill="none" stroke-linecap="round" stroke="black" stroke-width="4" stroke-miterlimit="10" x1="50" y1="50" x2="49.5" y2="74">
					  <animateTransform 
						   attributeName="transform" 
						   dur="15s"
						   type="rotate"
						   from="0 50 50"
						   to="360 50 50"
						   repeatCount="indefinite" />
				</line>	
			</svg>
			<div class="practise">
				课后练习2-修改后
			</div>
		</div>
		
		<div class="icon">
			<svg version="1.1" class="cat" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
				 height="100" viewBox="0 0 600 600">
				<path fill="currentColor"
					d="M290.59 192c-20.18 0-106.82 1.98-162.59 85.95V192c0-52.94-43.06-96-96-96-17.67 
					0-32 14.33-32 32s14.33 32 32 32c17.64 0 32 14.36 32 32v256c0 35.3 28.7 64 64 
					64h176c8.84 0 16-7.16 16-16v-16c0-17.67-14.33-32-32-32h-32l128-96v144c0 8.84 7.16 
					16 16 16h32c8.84 0 16-7.16 16-16V289.86c-10.29 2.67-20.89 4.54-32 4.54-61.81 
					0-113.52-44.05-125.41-102.4zM448 96h-64l-64-64v134.4c0 53.02 42.98 96 96 
					96s96-42.98 96-96V32l-64 64zm-72 80c-8.84 0-16-7.16-16-16s7.16-16 16-16 16 
					7.16 16 16-7.16 16-16 16zm80 0c-8.84 0-16-7.16-16-16s7.16-16 16-16 16 7.16 16 
					16-7.16 16-16 16z">
				</path>
				</svg>
			<div class="practise_3">课后练习3-原图</div>
		</div>
		
		<div class="icon">
			<svg version="1.1" class="cat" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
				 height="100" viewBox="0 0 600 600">
				<style type="text/css">
					.st0{fill:#FFFFFF;}
				</style>
				<path d="M290.6,176c-17.2,0-82.6,1.4-136.1,53.7c-9.3,9.1-18.3,19.8-26.5,32.2v-86c0-52.9-43.1-96-96-96C14.3,80,0,94.3,0,112
					c0,17.7,14.3,32,32,32c17.6,0,32,14.4,32,32c-1.6,10.9-4.3,28.9-8.2,51C44.5,292.4,35.9,313.6,36,350.9c0,14.2,1.3,36.2,8.2,63.6
					c2.5,7.2,15.2,41.9,38.5,62.7c5.5,4.9,14.1,12.5,27.7,16.3c5.6,1.6,11.5,2.4,17.5,2.4h176c8.8,0,16-7.2,16-16v-16
					c0-17.7-14.3-32-32-32h-32c20.8-9,47.3-22.9,74.7-44.3c22.9-17.9,40.4-36.2,53.3-51.7c0,48,0,96,0,144c0,8.8,7.2,16,16,16h32
					c8.8,0,16-7.2,16-16V273.9c-10.3,2.7-20.9,4.5-32,4.5C354.2,278.4,302.5,234.4,290.6,176z M448,80c-21.3,0-42.7,0-64,0
					c-21.3-21.3-42.7-42.7-64-64c0,6.4,0,12.8,0,19.2c0,38.4,0,76.8,0,115.2c0,52.7,43.3,96,96,96c53,0,96-43,96-96V16L448,80z"/>
				<path d="M32.4,467.6"/>
				<path d="M28,478.6"/>
				<g>
					<path class="st0" d="M385.1,158.6c0,4.9-4,9-9,9h-0.8c-5,0-9-4.1-9-9v-31.9c0-5,4-9,9-9h0.8c5,0,9,4,9,9V158.6z"/>
				</g>
				<g>
					<path class="st0" d="M465.4,158.6c0,4.9-4,9-9,9h-0.8c-5,0-9-4.1-9-9v-31.9c0-4.9,4-9,9-9h0.8c5,0,9,4.1,9,9V158.6z"/>
				</g>
				<path class="st0" d="M331.9,42.9c0,16.3,0.1,32.5,0.1,48.8c10.6-4.6,21.1-9.2,31.7-13.7C353.2,66.2,342.6,54.6,331.9,42.9z"/>
				<path class="st0" d="M502,42.9c0,16.3-0.1,32.5-0.1,48.8c-10.6-4.6-21.1-9.2-31.7-13.7C480.8,66.2,491.4,54.6,502,42.9z"/>
			</svg>
			<div class="practise_3">课后练习3-修改后</div>
	</body>
</html>
